<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8">
    <title>机房环境监控</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <link rel="icon" type="image/png" href="img/favicon.png">
    <!-- Bootstrap 3.3.2 -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/morris/morris.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link href="dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
	
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
 
  <body class="skin-blue sidebar-mini">
    <div class="wrapper">

      <!-- Main Header -->
      <header class="main-header">

        <!-- Logo -->
        <a href="" class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"><b>IO</b>TU</span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg"><b>IOTU</b>Monitor</span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only"><b>IOTU</b>Monitor</span>
          </a>
          <!-- Navbar Right Menu -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- Messages: style can be found in dropdown.less-->

              <!-- Notifications Menu -->
              <li class="dropdown notifications-menu">
                <!-- Menu toggle button -->
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-bell-o"></i>
                  <#if logNum?? && logNum != 0>

                  <span class="label label-warning">${logNum}</span>
                  
                  </#if>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">日志数量</li>
                  <li>
                    <!-- Inner Menu: contains the notifications -->
                    <ul class="menu">
                      <li><!-- start notification -->
                        <a href="#">
                          <i class="fa fa-users text-aqua"></i>今天有${logNum}条日志信息
                        </a>
                      </li><!-- end notification -->
                    </ul>
                  </li>
                  <li class="footer"><a href="#logs">查看全部</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
      </header>
      <!-- Left side column. contains the logo and sidebar -->
      <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">

          <!-- Sidebar Menu -->
          <ul class="sidebar-menu">
            <li class="header">选项</li>
            <!-- Optionally, you can add icons to the links -->
            <li class="active"><a href="/monitor"><i class='fa fa-link'></i> <span>信息</span></a></li>
            <li><a href="manager"><i class='fa fa-link'></i> <span>管理</span></a></li>
          </ul><!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
      </aside>

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            监控信息
            <small>support by CUIT_IOTU</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 环境监控</a></li>
            <li class="active">监控信息</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">

          <!-- Your Page Content Here -->
		        <!-- Main content -->
          <!-- Small boxes (Stat box) -->
          <div class="row">
            <div class="col-lg-3">
            </div>
             <div class="col-lg-3 col-xs-6">
              <!-- small box -->
              <div class="small-box bg-yellow">
                <div class="inner">
                  <h3>
                  <#if averageTemperature??>
                  ${averageTemperature}&#176;C
                  <#else>
                  0&#176;C
                  </#if></h3>
                  <p>平均温度</p>
                </div>
                <div class="icon">
                  <i class="ion ion-thermometer"></i>
                </div>
                
              </div>
            </div><!-- ./col -->
            <div class="col-lg-3 col-xs-6">
              <!-- small box -->
              <div class="small-box bg-green">
                <div class="inner">
                  <h3>
                  <#if averageHumidity??>
                  ${averageHumidity}<sup style="font-size: 20px">%</sup>
                  <#else>
                  0<sup style="font-size: 20px">%</sup>
                  </#if>
                  
                  </h3>
                  <p>平均湿度</p>
                </div>
                <div class="icon">
                  <i class="ion ion-waterdrop"></i>
                </div>
                
              </div>
            </div><!-- ./col -->
           
           
           
          </div><!-- /.row -->
          <!-- Main row -->
        <section class="content-header">
          <h4>
            节点信息
          </h4>
        </section>

        <div class="row">
          <#if sensors??>
            <#list sensors as s>
               <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="ion ion-ios-speedometer"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">编号 ${s.name}</span>
                  <span class="info-box-text">温度 ${s.temperature}&#176;C</span>
                  <span class="info-box-text">湿度 ${s.humidity}%</span>
                  <#if s.smoke == 0>
                  <span class="info-box-text">烟雾 正常</span>
                  <#else>
                  <span class="info-box-text">烟雾 异常</span>
                  </#if>
                  <span class="info-box-text">时间 ${s.recordTime?string("MM-dd HH:mm")}</span>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
            </div><!-- /.col -->
            </#list>
          </#if>
          
        </div>
        <section class="content-header">
          <h4>
            历史记录
          </h4>
        </section>
        
        <div class="row">    
        <!-- Left col -->
        <section class="col-lg-6 connectedSortable">
        	<!-- LINE CHART -->
              <div class="box box-info">
                <div class="box-header with-border">
                  <h3 class="box-title">日温度记录</h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body chart-responsive">
                  <div class="chart" id="day-t-chart" style="height: 300px;"></div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
              <!-- LINE CHART -->
              <div class="box box-info">
                <div class="box-header with-border">
                  <h3 class="box-title">月温度记录</h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body chart-responsive">
                  <div class="chart" id="month-t-chart" style="height: 300px;"></div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->

        </section><!-- /.Left col -->
        <!-- right col (We are only adding the ID to make the widgets sortable)-->
        <section class="col-lg-6 connectedSortable">
			 <!-- LINE CHART -->
              <div class="box box-info">
                <div class="box-header with-border">
                  <h3 class="box-title">日湿度记录</h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body chart-responsive">
                  <div class="chart" id="day-h-chart" style="height: 300px;"></div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
              <!-- LINE CHART -->
              <div class="box box-info">
                <div class="box-header with-border">
                  <h3 class="box-title">月湿度记录</h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body chart-responsive">
                  <div class="chart" id="month-h-chart" style="height: 300px;"></div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
        </section><!-- right col -->
        </div><!-- /div (chart box)-->
        <div class="row">
        	<section class="content">
          <!-- Default box -->
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title" id="logs">日志</h3>
              <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
                <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <#if logs??>
              <#list logs as l>
              <#if l??>
                <p><span>${l.date?string("YYYY-MM-dd hh:mm:ss")} </span><span style="margin-left:30px;">${l.info}</span></p>
              </#if>
              </#list>
              </#if>
             </div><!-- /.box-body -->
            
          </div><!-- /.box -->

        </section><!-- /.content -->
        </div><!-- /div (log box)-->
    </div><!-- /.row (main row) -->

       
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->

      <!-- Main Footer -->
      <footer class="main-footer">
        <!-- To the right -->
        <div class="pull-right hidden-xs">
          mail: hanchen@126.com
        </div>
        <!-- Default to the left -->
        <strong>由成都信息工程大学IOTU技术小组提供技术支持</strong> 
      </footer>
      

      <!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar -->
      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

    <!-- REQUIRED JS SCRIPTS -->

    <!-- jQuery 2.1.3 -->
    <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js" type="text/javascript"></script>
	 <!-- Morris.js charts -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="plugins/morris/morris.min.js" type="text/javascript"></script>
    <!-- FastClick -->
    <script src='plugins/fastclick/fastclick.min.js'></script>
    <script type="text/javascript">
    	$(function () {
        "use strict";
         // day-t-chart
        var line = new Morris.Line({
          element: 'day-t-chart',
          resize: true,
          data: [
            <#if dayRecord??>
            <#list dayRecord as d>
              {d: '${d.recordTime?string("YYYY-MM-dd HH:mm:ss")}', data: ${d.temperature}},
            </#list>
            </#if>
          ],
          xkey: 'd',
          xLabels:'hour',
          ykeys: ['data'],
          labels: ['温度'],
          lineColors: ['#3c8dbc'],
          hideHover: 'auto'
        });
          // day-h-chart
        var line = new Morris.Line({
          element: 'day-h-chart',
          resize: true,
          data: [
            <#if dayRecord??>
            <#list dayRecord as d>
              {d: '${d.recordTime?string("YYYY-MM-dd HH:mm:ss")}', data: ${d.humidity}},
            </#list>
            </#if>
          ],
          xkey: 'd',
          ykeys: ['data'],
          labels: ['湿度'],
          lineColors: ['#3c8dbc'],
          hideHover: 'auto'
        });
          // month-t-chart
        var line = new Morris.Line({
          element: 'month-t-chart',
          resize: true,
          data: [
            <#if monthRecord??>
            <#list monthRecord as d>
              {m: '${d.recordTime?string("YYYY-MM-dd HH:mm:ss")}', data: ${d.temperature}},
            </#list>
            </#if>
          ],
          xkey: 'm',
          ykeys: ['data'],
          labels: ['温度'],
          lineColors: ['#3c8dbc'],
          hideHover: 'auto'
        });
          // month-h-chart
        var line = new Morris.Line({
          element: 'month-h-chart',
          resize: true,
          data: [
            <#if monthRecord??>
            <#list monthRecord as d>
              {y: '${d.recordTime?string("YYYY-MM-dd hh:mm:ss")}', data: ${d.humidity}},
            </#list>
            </#if>
          ],
          xkey: 'y',
          ykeys: ['data'],
          labels: ['湿度'],
          lineColors: ['#3c8dbc'],
          hideHover: 'auto'
        });

    });
    </script>
   
  </body>
</html>